<html>
   <head>
      <title>DANCING VERSION</title>
      <script type="text/javascript">
         <!-- Begin
         const CANVAS = {DRAW:"canvasDraw",ICON:"canvasIcon",TOOL:"canvasTool",SAVE:"canvasSave"};
         const DIMENSION = {X:80,Y:80,WIDTH:700,HEIGHT:500};
         const TOOL = {ERASER:0,PENCIL:1,BRUSH:2,ICONDRAG:3};

         var mouse={x:0,y:0,m:0,n:0};
         var pen={type:TOOL.PENCIL,color:"#000",width:0};
         var current={canvas:CANVAS.DRAW,mousedown:false};
         var icons = new Array();
         
         document.onmousemove = mouseMove;
         document.onmousedown = mouseDown;
         document.onmouseup = mouseUp;

         window.onload = function(){
            var canvases = document.getElementsByTagName('canvas');
            for (i in canvases) {
               disableSelection(canvases[i]);
            }
            var images = document.getElementsByTagName('img');
            for (i in images) {
               disableSelection(images[i]);
            }
            
            //##########- ADD ICON HERE (START) -##########//
            //canvasicon.addIcon(x,y,width,height,src);
            canvasicon.addIcon(100,100,100,100,"../PNG/Generic Green.png");
            canvasicon.addIcon(300,300,100,100,"../PNG/Generic.png");
			
            //##########- ADD ICON HERE  (END)  -##########//
            
            
            canvasicon.refresh();
			/*
            try{
               setInterval(canvasicon.refresh, 10);
            }catch(ex){
               dump(ex);
            }
			*/
            
            action('pencil');
         };
         
         function action(command){
            if(command=="eraser"){
               current.canvas=CANVAS.DRAW;
               pen.type=TOOL.ERASER;
               pen.width=5;
            }else if(command=="pencil"){
               current.canvas=CANVAS.DRAW;
               pen.type=TOOL.PENCIL;
               pen.width=1;
            }else if(command=="brush"){
               current.canvas=CANVAS.DRAW;
               pen.type=TOOL.BRUSH;
               pen.width=5;
            }else if(command=="drag"){
               current.canvas=CANVAS.ICON;
               pen.type=TOOL.ICONDRAG;
               pen.width=5;
            }else if(command=="clear"){
               canvasdraw.clear();
            }else if(command=="save"){
               save();
            }else if(command=="null"){
            }
         }
         function cColor(color){
            pen.color=color;
         }
         
         function mouseDown(e){
            mouse.m = mouse.x;
            mouse.n = mouse.y;
            current.mousedown=true;
            current.selectedicon=canvasicon.selectIcon();
            canvasicon.updateOffset();
            compute();
         }
         
         function mouseUp(e){
            current.mousedown=false;
         }
         
         function mouseMove(e){
            mouse.m = mouse.x;
            mouse.n = mouse.y;
            mouse.x = e.pageX-DIMENSION.X;
            mouse.y = e.pageY-DIMENSION.Y;
            compute();
         }
         
         function compute(){
            canvastool.refresh();
            if(!current.mousedown)return;
            switch(pen.type){
               case TOOL.PENCIL:
               case TOOL.BRUSH:
                  canvasdraw.line(mouse.m,mouse.n,mouse.x,mouse.y,pen.width,pen.color);
                  break;
               case TOOL.ERASER:
                  canvasdraw.erase()
                  break;
               case TOOL.ICONDRAG:
                  canvasicon.moveIcon();
            }
         }
         
         var canvasdraw = {
            line:function(m,n,x,y,width,color){
               var c = document.getElementById(CANVAS.DRAW).getContext("2d");
               c.beginPath();
               c.strokeStyle = color;
               c.lineWidth   = width*2;
               c.moveTo(m,n);
               c.lineTo(x,y);
               c.stroke();
               c.fillStyle=color;
               c.arc(m,n,width,0,Math.PI*2,true);
               c.arc(x,y,width,0,Math.PI*2,true);
               c.fill();
               c.closePath();
            },
            erase:function(){
               var c = document.getElementById(CANVAS.DRAW).getContext("2d");
               c.beginPath();
               c.clearRect(mouse.x-pen.width,mouse.y-pen.width,pen.width*2,pen.width*2);
               c.fill();
               c.closePath();
            },
            clear:function(){
               var c = document.getElementById(CANVAS.DRAW).getContext("2d");
               c.beginPath();
               c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
               c.fill();
               c.closePath();
            }
         }
         
         var canvasicon = {
            refresh:function(){
               var c = document.getElementById(CANVAS.ICON).getContext("2d");
               c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
			   

               var selected = -1;
               if(current.mousedown){
                  selected = canvasicon.selected;
               }else{
                  selected = canvasicon.hoverIcon();
               }

               for (i in icons){
                  if(i == selected){
                     canvasicon.drawDanceIcon(icons[i]);
                  }else{
                     canvasicon.drawIcon(icons[i]);
                  }
               }
            },
            drawIcon:function(icon){
               var c = document.getElementById(CANVAS.ICON).getContext("2d");
               var img = new Image();
               img.src = icon.src;

               c.drawImage(img,icon.x,icon.y,icon.width,icon.height);
            },
            drawDanceIcon:function(icon){
               var c = document.getElementById(CANVAS.ICON).getContext("2d");
               var img = new Image();
               img.src = icon.src;

               var i = (Math.random()*10)-5;
               var j = (Math.random()*10)-5;
               dump('dance');
               
               c.drawImage(img,icon.x+i,icon.y+j,icon.width,icon.height);
            },
            addIcon:function(x,y,width,height,src){
               icon = {x:x,y:y,width:width,height:height,src:src};
               icons.push(icon);
            },
            hoverIcon:function(){
               var list = new Array();
               for (i in icons){
                  if(mouse.x-icons[i].x<icons[i].width
                  && mouse.x-icons[i].x>0
                  && mouse.y-icons[i].y<icons[i].height
                  && mouse.y-icons[i].y>0){
                     list.push(i);
                  }
               }
               var tmp = list.pop();
               if(tmp>=0){
                  return tmp;
               }else{
                  return -1;
               }
            },
            selectIcon:function(){
               canvasicon.selected = canvasicon.hoverIcon();
            },
            updateIcon:function(iconIndex){
               icons[iconIndex].x=mouse.x-icons[iconIndex].offsetX;
               icons[iconIndex].y=mouse.y-icons[iconIndex].offsetY;
               canvasicon.refresh();
            },
            moveIcon:function(){
               //var selected = canvasicon.selectIcon();
               canvasicon.updateIcon(canvasicon.selected);
            },
            updateOffset:function(){
               try{
                  if(canvasicon.selected>=0){
                     icons[canvasicon.selected].offsetX=mouse.x-icons[canvasicon.selected].x;
                     icons[canvasicon.selected].offsetY=mouse.y-icons[canvasicon.selected].y;
                  }
               }catch(ex){
               }
            },
            selected:-1
            
         };
         
         var canvastool = {
            refresh:function(){
               var c = document.getElementById(CANVAS.TOOL).getContext("2d");
               c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
               switch(pen.type){
                  case TOOL.PENCIL:
                  case TOOL.BRUSH:
                     c.beginPath();
                     c.fillStyle=pen.color;
                     c.arc(mouse.x,mouse.y,pen.width,0,Math.PI*2,true);
                     c.fill();
                     c.closePath();
                     break;
                  case TOOL.ERASER:
                     c.beginPath();
                     c.fillStyle="#FFF";
                     c.fillRect(mouse.x-pen.width,mouse.y-pen.width,pen.width*2,pen.width*2);
                     c.fill();
                     c.strokeStyle = "#000";
                     c.lineWidth   = 1;
                     c.moveTo(mouse.x-pen.width,mouse.y-pen.width);
                     c.lineTo(mouse.x-pen.width,mouse.y+pen.width);
                     c.lineTo(mouse.x+pen.width,mouse.y+pen.width);
                     c.lineTo(mouse.x+pen.width,mouse.y-pen.width);
                     c.lineTo(mouse.x-pen.width,mouse.y-pen.width);
                     c.stroke();
                     c.closePath();
                     break;
                  case TOOL.ICONDRAG:
                     var w=2;
                     c.beginPath();
                     c.strokeStyle = "#000";
                     c.lineWidth   = w;
                     c.moveTo(mouse.x-pen.width,mouse.y);
                     c.lineTo(mouse.x+pen.width,mouse.y);
                     c.moveTo(mouse.x,mouse.y-pen.width);
                     c.lineTo(mouse.x,mouse.y+pen.width);
                     c.stroke();
                     c.closePath();
                     break;
                     
               }
               canvastool.highlightIcon();
            },
            highlightIcon:function(){
               if(pen.type!=TOOL.ICONDRAG)return;
               
               var selected = -1;
               if(current.mousedown){
                  selected = canvasicon.selected;
               }else{
                  selected = canvasicon.hoverIcon();
               }

               if(selected<0)return;
               var c = document.getElementById(CANVAS.TOOL).getContext("2d");
               c.beginPath();
               c.strokeStyle = "#0FF";
               c.lineWidth   = 2;
               c.moveTo(icons[selected].x,icons[selected].y);
               c.lineTo(icons[selected].x+icons[selected].width,icons[selected].y);
               c.lineTo(icons[selected].x+icons[selected].width,icons[selected].y+icons[selected].height);
               c.lineTo(icons[selected].x,icons[selected].y+icons[selected].height);
               c.lineTo(icons[selected].x,icons[selected].y);
               c.stroke();
               c.closePath();
               
            }
         };
         
         function save(){
            try{
               var c=document.getElementById(CANVAS.DRAW);
               var strData = c.toDataURL("image/png");
               document.location.href = strData;
            }catch(ex){
               alert(ex);
            }
         }
         
         /**
          * disableSelection prevents canvas element from being highlighted easily.
          */
         function disableSelection(element) {
            if (typeof element.onselectstart != 'undefined') {
               element.onselectstart = function() { return false; };
            }/* else if (typeof element.style.MozUserSelect != 'undefined') {
               element.style.MozUserSelect = 'none';
            }*/ else {
               element.onmousedown = function() { return false; };
            }
         }

         function dump(text){
            document.status.display.value=text;
         }
         
      </script>
   </head>
   <body>
      <table style="position:fixed;top:10px;left:80px;" cellspacing="0"><tr> 
         <td width="20" height="20" bgcolor="#000000" onClick="cColor(this.bgColor)"></td>
         <td width="20" height="20" bgcolor="#FF0000" onClick="cColor(this.bgColor)"></td>
         <td width="20" height="20" bgcolor="#00FF00" onClick="cColor(this.bgColor)"></td>
         <td width="20" height="20" bgcolor="#0000FF" onClick="cColor(this.bgColor)"></td>
      </tr><tr>
         <td width="20" height="20" bgcolor="#888888" onClick="cColor(this.bgColor)"></td>
         <td width="20" height="20" bgcolor="#FFFF00" onClick="cColor(this.bgColor)"></td>
         <td width="20" height="20" bgcolor="#FF00FF" onClick="cColor(this.bgColor)"></td>
         <td width="20" height="20" bgcolor="#00FFFF" onClick="cColor(this.bgColor)"></td>
      </tr></table>
      
      <img src="pencil.png" alt="Pencil"    onclick="action('pencil')" style="position:fixed;top:10px;left:10px;"/> 
      <img src="brush.png"  alt="Brush"     onclick="action('brush')"  style="position:fixed;top:80px;left:10px;"/> 
      <img src="eraser.png" alt="Eraser"    onclick="action('eraser')" style="position:fixed;top:150px;left:10px;"/> 
      <img src="clear.png"  alt="Clear"     onclick="action('clear')"  style="position:fixed;top:220px;left:10px;"/> 
      <img src="drag.png"   alt="Drag Icon" onClick="action('drag')"   style="position:fixed;top:290px;left:10px;"/> 
      <img src="save.png"   alt="Save"      onclick="action('save')"   style="position:fixed;top:360px;left:10px;"/>
      
      <canvas id="canvasIcon" width="700" height="500" style="border:1px solid #c3c3c3;position:fixed;top:80px;left:80px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <canvas id="canvasDraw" width="700" height="500" style="border:1px solid #c3c3c3;position:fixed;top:80px;left:80px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <canvas id="canvasTool" width="700" height="500" style="border:1px solid #c3c3c3;position:fixed;top:80px;left:80px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <canvas id="canvasSave" width="700" height="500" style="border:1px solid #c3c3c3;position:fixed;top:80px;left:80px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      
      <form name="status" style="position:fixed;top:600px;left:80px;">
      <input type="text" name="display">
      </form>
   </body>
</html>
